var htmlCodes = [
    '<div id="printFinal">',
    '    <el-dialog title="打印结算清单" :visible.sync="dialogVisible">',
    '    <!--startprint-->',
    '    <div id="forPrint" style="width: 210mm">',
    '        <table width="100%" border="0" cellpadding="0" cellspacing="0">',
    '            <tbody>',
    '            <tr>',
    '                <td width="33%"> </td>',
    '                <td  align="center">',
    '                    <p style="font-size: 3em;margin: 0 0 0;">结算清单</p>',
    '                </td>',
    '                <td width="33%" align="right"></td>',
    '            </tr>',
    '            </tbody>',
    '        </table>',
    '        <table width="100%" border="0" cellpadding="0" cellspacing="0">',
    '            <tbody>',
    '            <tr>',
    '                <td width="30%">&nbsp;&nbsp;&nbsp;&nbsp;业务单号：{{erpOrder.orderNo}}</td>',
    '                <td width="30%"></td>',
    '                <td colspan=2>接单时间：{{erpOrder.createTime}}</td>',
    '            </tr>',
    '            <tr>',
    '                <td width="30%">&nbsp;&nbsp;&nbsp;&nbsp;客户名称：{{erpOrder.memberName}}</td>',
    '                <td width="30%"></td>',
    '                <td colspan=2>联系电话：',
    '                    <span v-if="erpOrder.shipMobile!=null">{{erpOrder.shipMobile}}</span>',
    '                    <span v-else>{{erpOrder.shipTel}}</span>',
    '                </td>',
    '            </tr>',
    '            <tr>',
    '                <td width="30%">&nbsp;&nbsp;&nbsp;&nbsp;联系人:{{erpOrder.shipName}}</td>',
    '                <td width="30%"></td>',
    '                <td>项目名称：{{erpOrder.projectName}}</td>',
    '            </tr>',
    '            <tr>',
    '                <td width="30%">&nbsp;&nbsp;&nbsp;&nbsp;付款方式：{{erpOrder.payment}}',
    '                </td>',
    '                <td width="30%"></td>',
    '                <td>送货方式：',
    '                    <span v-if="erpOrder.sendType  == 0">配送</span>',
    '                    <span v-if="erpOrder.sendType  == 1">自取</span>',
    '                </td>',
    '            </tr>',
    '            <tr>',
    '                <td width="30%">&nbsp;&nbsp;&nbsp;&nbsp;备注：{{erpOrder.memo}}</td>',
    '                <td width="30%"></td>',
    '                <td>送货地址：{{erpOrder.shipArea}}{{erpOrder.shipAddr}}</td>',
    '            </tr>',
    '            </tbody>',
    '        </table>',
    '        <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">',
    '            <thead>',
    '            <tr >',
    '                <td width="20%" height="10px" align="center">产品名称</td>',
    '                <td width="30%" align="center" colspan=3>规格</td>',
    '                <td width="10%" align="center">数量</td>',
    '                <td width="10%" align="center">单价</td>',
    '                <td width="10%" align="center">总价</td>',
    '            </tr>',
    '            </thead>',
    '            <tbody>',
    '            <tr v-for="(item,index) in orderItemDetailData" :key="index">',
    '                <td align="center" height="10px">{{item.name}}</td>',
    '                <td align="center" colspan=3>{{item.addon}}</td>',
    '                <td align="center">{{item.nums}}</td>',
    '                <td align="center">{{item.price}}</td>',
    '                <td align="center">{{item.amount}}</td>',
    '            </tr>',
    '            <tr>',
    '                <td width="10%" colspan=4 align="center">合计应收金额：{{erpOrder.payableAmount}}</td>',
    '                <td width="10%" colspan=4 align="center">优惠金额：{{erpOrder.pmtGoods}}</td>',
    '            </tr>',
    '            </tbody>',
    '        </table>',
    '        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">',
    '            <tbody>',
    '            <tr>',
    '                <td width="60%" colspan=2>操作人:{{courrentUser.username}}&nbsp;{{sellerInfoEntity.doorheadName}}</td>',
    '                <td width="20%">签收时间:</td>',
    '                <td>客户签名:</td>',
    '            </tr>',
    '            </tbody>',
    '        </table>',
    '        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">',
    '            <tbody>',
    '            <tr>',
    '                <td width="80%" colspan=3>地址:{{sellerInfoEntity.area}}{{sellerInfoEntity.addr}}</td>',
    '                <td>电话:{{sellerInfoEntity.sellerMobile}}</td>',
    '            </tr>',
    '            </tbody>',
    '        </table>',
    '    </div>',
    '    <!--endprint-->',
    '    <span slot="footer" class="dialog-footer">',
    '            <el-button @click="dialogVisible = false" size="small">取 消</el-button>',
    '            <el-button type="primary" @click="doPrint" size="small">打 印</el-button>',
    '        </span>',
    '    </el-dialog>',
    '</div>'
].join("");
Vue.component('zy-print-final', {
    template: htmlCodes,
    props: {
        orderNo: '',
    },
    data: function () {
        return {
            erpOrder: {},
            orderItemDetailData: {},
            courrentUser:{},
            sellerInfoEntity:{},
            dialogVisible: false,
        }
    },
    methods: {
        doPrint: function () {
            var printData = document.getElementById("forPrint").innerHTML; // 只打印 forPrint 这个div中的内容。
            window.document.body.innerHTML = printData;   //把 html 里的数据 复制给 body 的 html 数据 ，相当于重置了整个页面的 内容
            window.print()
            window.location.reload();
            //将原有页面还原到页面
            // document.getElementById("forPrint").innerHTML = printData;
        },
        getOrderData: function (orderNo) {
            var self=this
            $.get(baseURL + "order/erporder/printBalance/" + orderNo, function (r) {
                if (r.code == 0) {
                    self.erpOrder = r.erpOrder;
                    self.erpOrder.sendType=self.erpOrder.sendType==0?'非自提':'自提'
                    //转化规格start
                    const details = r.orderItemDetailData
                    details.forEach(detail => {
                        //判断addon是多部件
                        if (detail.addon&&detail.addon.startsWith('[{')) {
                            const addons = JSON.parse(detail.addon);
                            addons.forEach(e => {
                                const basicParam=e.basicParam

                                // 用来保存所有的属性值
                                var props = "";
                                // 开始遍历
                                for(var p in basicParam){
                                    // 方法
                                    if(typeof(basicParam[p])=="function"){
                                        basicParam[p]();
                                    }else{
                                        // p 为属性名称，obj[p]为对应属性的值
                                        if ('是否自来纸' != p) {
                                            props+= basicParam[p] + "\t";
                                        }
                                    }
                                }
                                // 最后显示所有的属性
                                detail.addon = props

                            })
                        }
                    });
                    //转化规格end
                    self.orderItemDetailData = details;
                    // vm.orderItemDetailData=r.orderItemDetailData;
                    self.courrentUser = r.curentUser
                    self.sellerInfoEntity = r.sellerInfoEntity
                    self.dialogVisible=true
                } else {
                    alert(r.msg);
                }

            })
        },
    }


})

